<div class="reading_menu_logo_container">
  <a href="/">
    <img
      src="{{ url_for('static', filename='img/lute.png') }}"
      class="lutelogo_small"
      style="cursor: pointer"
    />
  </a>
  <!-- <h2>Lute</h2> -->
  <button class="close-btn reading-menu-close-btn" onclick="closeMenu()"></button>
</div>

<div id="focus-container">
  <label for="focus">Focus mode</label>
  <input type="checkbox" name="focus" id="focus">
</div>

<div id="tap_sets_status-container">
  <label for="tap_sets_status">Quick Set Status Mode</label>
  <input type="checkbox" name="tap_sets_status" id="tap_sets_status">
</div>

<div class="text-options-container">
  <div class="text-options-btn-container">
    <button class="text-options-button font-minus" title="Decrease font size"></button>
    <button class="text-options-button font-plus" title="Increase font size"></button>
  </div>
  <div class="text-options-btn-container">
    <button class="text-options-button lh-minus" title="Decrease line height"></button>
    <button class="text-options-button lh-plus" title="Increase line height"></button>
  </div>
  <div class="text-options-btn-container">
    <button class="text-options-button width-minus" title="Decrease content width"></button>
    <button class="text-options-button width-plus" title="Increase content width"></button>
  </div>
  <div class="text-options-btn-container">
    <button class="text-options-button column-one" title="One column text"></button>
    <button class="text-options-button column-two" title="Two column text"></button>
  </div>
</div>

<ul>
  {% if book.source_uri %}
  <li>
    <a class="reading-menu-item" href="{{ book.source_uri }}" target="_blank" tabindex="-1">
      <span>Show source URL</span>
    </a>
  </li>
  {% endif %}
  <li id="page-operations-li" class="reading-menu-item reading-menu-top-level-li">
    <span id="page-operations-title" class="reading-menu-top-level">Edit</span>
    <div id="page-operations-menu" class="reading-menu-sublist">
      <ul>
        <li>
          <a id="editText" class="reading-menu-item" href="" onclick="edit_current_page(); return false;" title="Edit current page content">
            Edit current page
          </a>
        </li>
        <li>
          <a id="readmenu_add_page_after" class="reading-menu-item" href="" onclick="add_page_after(); return false;" title="Add page after current page">
            Add page after
          </a>
        </li>
        <li>
          <a id="readmenu_add_page_before" class="reading-menu-item" href="" onclick="add_page_before(); return false;" title="Add page before current page">
            Add page before
          </a>
        </li>
        <li>
          <a id="readmenu_delete_page" class="reading-menu-item" href="" onclick="delete_current_page(); return false;" title="Delete current page">
            Delete current page
          </a>
        </li>
      </ul>
    </div>
  </li>
  <li id="bookmark-operations-li" class="reading-menu-item reading-menu-top-level-li">
    <span id="bookmark-operations-title" class="reading-menu-top-level">Bookmarks</span>
    <div id="bookmark-operations-menu" class="reading-menu-sublist">
      <ul>
        <li>
          <a id="readmenu_bookmark_index" class="reading-menu-item" href="/bookmarks/{{ book.id }}" title="Index">
            List bookmarks
          </a>
        </li>
        <li>
          <a id="readmenu_add_bookmark" class="reading-menu-item" href="" onclick="add_bookmark(); return false;" title="Add bookmark">
            Add bookmark
          </a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <a id="listTermsOnCurrentPage" class="reading-menu-item" href="" onclick="open_term_list_for_current_page(); return false;">
      Term list
    </a>
  </li>
  <li>
    <!-- mobile users need this link, since they don't have keyboard shortcuts. -->
    <a id="translateSentence" class="reading-menu-item" href="" onclick="handle_translate('sentence-id'); return false;">
      Translate sentence
    </a>
  </li>
  <li>
    <a id="translateText" class="reading-menu-item" href="" onclick="handle_translate(null); return false;">
      Translate page
    </a>
  </li>
  <li>
    <a id="next_theme" class="reading-menu-item" onclick="next_theme(); return false;" title="Next theme">
      Next theme
    </a>
  </li>
  <li>
    <a id="toggle_highlights" class="reading-menu-item" onclick="toggle_highlight(); return false;" title="Toggle highlights">
      Toggle highlights
    </a>
  </li>
  <li>
    <a id="keyboard_shortcuts" class="reading-menu-item" title="Keyboard shortcuts"
       href="/settings/shortcuts"
       target="_blank">
      Keyboard shortcuts
    </a>
  </li>
  <li id="screen-interactions-li" class="reading-menu-item reading-menu-top-level-li">
    <span id="screen-interactions-title" class="reading-menu-top-level">Screen interactions</span>
    <div id="screen-interactions-menu" class="reading-menu-sublist">
      <ul>
        <li>
          <a id="screen-mobile" class="reading-menu-item" href="" onclick="set_screen_type('mobile'); return false;">
            Mobile
          </a>
        </li>
        <li>
          <a id="screen-desktop" class="reading-menu-item" href="" onclick="set_screen_type('desktop'); return false;">
            Desktop
          </a>
        </li>
        <li>
          <a id="screen-auto" class="reading-menu-item" href="" onclick="set_screen_type('auto'); return false;">
            Auto
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>

<script>

  /**
   * Clicking top-level menu items for mobile should expand the
   * submenu items, and hide other submenu items.
   *
   * In mobile, the submenu items are shown below the top menu
   * items, eg
   *
   *   - Edit
   *     - sub action 1
   *     - sub action 2
   *   + Bookmarks
   *   other links
   *
   * Clicking a top-level menu item (such as "Bookmarks") should only
   * open the submenu for Bookmarks, and close the submenu for Edit.
   * Without this method, if the Edit menu was open and the Bookmarks
   * menu was clicked, a link _further down the page_ would be
   * clicked, as other elements were hidden and shown.
   */
  function _handle_top_level_menu_clicks_for_mobile() {
    $(".reading-menu-top-level-li").on("click", function (e) {
      e.preventDefault();
      e.stopPropagation();

      // Close all submenus except this one.
      const submenu = $(this).find(".reading-menu-sublist").first();
      if (submenu.length) {
        const isActive = submenu.hasClass("active");
        $(".reading-menu-sublist.active").removeClass("active");
        if (!isActive) {
          submenu.addClass("active");
        }
      }
    });

    // Prevent submenu clicks from triggering parent actions
    $(".reading-menu-sublist").on("click", function (e) {
      e.stopPropagation();
    });
  }

  $(document).ready(function () {
    _handle_top_level_menu_clicks_for_mobile();
  });
</script>
